<!DOCTYPE html>

<html>

<head>

    <link href='fullcalendar/fullcalendar.css' rel='stylesheet'/>

    <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>

    <script src='lib/jquery.min.js'></script>

    <script src='lib/jquery-ui.custom.min.js'></script>

    <script src='fullcalendar/fullcalendar.min.js'></script>

    <script>
        $(document).ready(function () {

            var date = new Date();

            var d = date.getDate();

            var m = date.getMonth();

            var y = date.getFullYear();

            $('#calendar').fullCalendar({

                header: {

                    left: 'prev,next, today',

                    center: 'title',

                    right: ''///*month,agendaWeek,agendaDay*/

                },

                editable: false,

                events: [

                    {

                        title: 'All Day Event',

                        start: new Date(y, m, 1)

                    },

                    {

                        title: 'Long Event',

                        start: new Date(y, m, d - 5),

                        backgroundColor: 'red',

                        end: new Date(y, m, d - 2)

                    },

                    {

                        id: 999,

                        title: 'Repeating Eventzzzz',

                        start: new Date(y, m, d - 3, 16, 0),

                        allDay: false

                    },

                    {

                        id: 999,

                        title: 'Repeating Event',

                        start: new Date(y, m, d + 4, 16, 0),

                        allDay: false

                    },

                    {

                        title: 'Meeting',

                        start: new Date(y, m, d, 10, 30),

                        allDay: false

                    },

                    {

                        title: 'Lunch',

                        start: new Date(y, m, d, 12, 0),

                        end: new Date(y, m, d, 14, 0),

                        allDay: false

                    },

                    {

                        title: 'Birthday Party',

                        start: new Date(y, m, d + 1, 19, 0),

                        end: new Date(y, m, d + 1, 22, 30),

                        allDay: false

                    },

                    {

                        title: 'Click for Google',

                        start: new Date(y, m, 28),

                        end: new Date(y, m, 29),

                        url: 'http://google.com/'

                    }

                ]

            });

        });
    </script>

    <style>
        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        }

        #calendar {
            width: 900px;
            margin: 0 auto;
        }
    </style>

</head>

<body>

<div id='calendar'></div>

</body>

</html>